import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import viteSetupExternals from "vite-plugin-vue-setup-extend";
import path from "path";
import viteCompression from "vite-plugin-compression";

import { visualizer } from "rollup-plugin-visualizer";
import cdnImport from "vite-plugin-cdn-import";
// import viteImagemin from "vite-plugin-imagemin";
import { ViteImageOptimizer } from 'vite-plugin-image-optimizer';
// import imageminify from 'vite-plugin-imageminify';


// import viteImageOptimize from "vite-plugin-image-optimize";
/**
 * 图片压缩注意事项
 * 
 * 压缩级别越高，图片体积越小，但压缩时间越长
 * 建议在质量和压缩率之间找到平衡点。
*/

// 路径解析函数，避免硬编码
const resolvePath = (dir: string) => path.resolve(__dirname, dir);

// CDN 配置函数，支持环境变量动态切换
const getCdnModules = () => {
  return [
    {
      name: "vue",
      var: "Vue",
      path: [
        process.env.VUE_CDN_URL || "https://unpkg.com/vue@3.5.13/dist/vue.global.js",
        "首先优先考虑跟项目部署的服务器器部署的CDN地址",
      ],
    },
    {
      name: "vue-router",
      var: "VueRouter",
      path: process.env.VUE_ROUTER_CDN_URL || "https://unpkg.com/vue-router@4.5.0/dist/vue-router.global.js",
    },
    {
      name: "element-plus",
      var: "ElementPlus",
      path: process.env.ELEMENT_PLUS_CDN_URL || "https://cdn.jsdelivr.net/npm/element-plus@2.9.4/dist/index.full.min.js",
    },
  ];
};

export default defineConfig({
  plugins: [
    vue(),
    // imageminify({
    //   gifsicle: {
    //     optimizationLevel: 3,
    //     interlaced: false,
    //   },
    //   mozjpeg: {
    //     quality: 75,
    //   },
    //   optipng: {
    //     optimizationLevel: 7,
    //   },
    //   pngquant: {
    //     quality: [0.8, 0.9],
    //     speed: 4,
    //   },
    //   svgo: {
    //     plugins: [
    //       { name: 'removeViewBox' },
    //       { name: 'removeEmptyAttrs', active: false },
    //     ],
    //   },
    // }),
    ViteImageOptimizer(),
    // ImageOptimizer({
    //   test: /\.(jpe?g|png|gif|svg)$/i,
    //   includePublic: true,
    //   logStats: true,
    //   svg: {
    //     multipass: true,
    //     plugins: [
    //       { name: 'removeViewBox', active: false },
    //       { name: 'removeDimensions', active: true },
    //     ],
    //   },
    //   png: {
    //     quality: 80,
    //   },
    //   jpeg: {
    //     quality: 80,
    //   },
    //   jpg: {
    //     quality: 80,
    //   },
    // }),
    // viteImagemin({
    //   verbose: true, // 启用详细日志输出
    //   gifsicle: { optimizationLevel: 3, interlaced: false },
    //   mozjpeg: { quality: 75 },
    //   optipng: { optimizationLevel: 7 },
    //   pngquant: { quality: [0.8, 0.9], speed: 4 },
    //   svgo: {
    //     plugins: [
    //       { name: 'removeViewBox' },
    //       { name: 'removeEmptyAttrs', active: false },
    //     ],
    //   },
    //   webp: { quality: 75 },
    // }),
    
    // viteImagemin({
    //   gifsicle: {
    //     interlaced: true, // 隔行扫描
    //     optimizationLevel: 3, // 压缩级别（0-3）
    //   },
    //   optipng: {
    //     optimizationLevel: 5, // 压缩级别（0-7），值越大压缩率越高
    //   },
    //   mozjpeg: {
    //     quality: 80, // 压缩质量（0-100）
    //     progressive: true, // 渐进式加载
    //     smooth: 2, // 平滑处理，减少色彩失真
    //   },
    //   svgo: {
    //     plugins: [
    //       { name: 'removeViewBox', active: false }, // 保留 viewBox 以防止 SVG 变形
    //       { name: 'removeEmptyAttrs', active: true }, // 移除空属性
    //       { name: 'convertColors', params: { currentColor: true } }, // 颜色转换
    //     ]
    //   },
    //   webp: {
    //     quality: 80, // WebP 质量（0-100）
    //     lossless: false, // 是否无损压缩
    //     method: 6, // 压缩方法（0-6），数值越大，压缩率越高但速度变慢
    //   },
    //   pngquant: {
    //     quality: [0.8, 0.9], // PNG 质量范围
    //     speed: 4, // 压缩速度（1-10），数值越大速度越快但压缩率降低
    //   },
    //   /** 是否在控制台输出压缩结果 */
    //   verbose: true,
    // }),

    // viteImagemin({
    //   gifsicle: {
    //     optimizationLevel: 3,
    //     interlaced: false,
    //   },
    //   mozjpeg: {
    //     quality: 75,
    //   },
    //   optipng: {
    //     optimizationLevel: 7,
    //   },
    //   pngquant: {
    //     quality: [0.8, 0.9],
    //     speed: 4,
    //   },
    //   svgo: {
    //     plugins: [
    //       { name: 'removeViewBox' },
    //       { name: 'removeEmptyAttrs', active: false },
    //       { name: 'removeDimensions' },
    //       { name: 'cleanupIDs', active: false },
    //     ],
    //   },
    //   webp: {
    //     quality: 75,
    //   },
    //   verbose: true
    // }),
    viteSetupExternals(),
    viteCompression({
      verbose: true, // 是否在控制台输出压缩信息
      disable: false, // 是否禁用压缩
      algorithm: "gzip", // 压缩算法
      ext: ".gz", // 文件后缀
      threshold: 10240, // 仅压缩大于 10KB 的文件
      deleteOriginFile: false, // 是否删除原始文件
    }),
    visualizer({
      open: true,
      filename: "bundle-analysis.html",
      gzipSize: true,
      brotliSize: true,
      template: "treemap", // 使用 treemap 图表类型
    }),
    cdnImport({
      modules: getCdnModules(),
    }),
  ],
  resolve: {
    alias: {
      "@": resolvePath("./src"),
      components: resolvePath("./src/components"),
      utils: resolvePath("./src/utils"),
    },
  },
  css: {
    postcss: './postcss.config.js',
  },
  build: {
    rollupOptions: {
      output: {
        assetFileNames: ({names}) => {
          if (names[0].endsWith('.css')) {
            return `css/[name].[hash][extname]`;
          }
          return `static/[name].[hash][extname]`;
        }, // 解决缓存问题
        chunkFileNames: 'js/[name]-[hash].js', // 异步 chunk
        entryFileNames: 'js/[name]-[hash].js', // 入口文件
        manualChunks: {
          'vendor-axios': ['axios']
        }
      },
    },
  }
});